<template>
   <div>
       <el-breadcrumb separator="/">
           <el-breadcrumb-item :to="{ path: '/home' }">权限</el-breadcrumb-item>
           <el-breadcrumb-item>商品管理</el-breadcrumb-item>
           <el-breadcrumb-item>商品分类</el-breadcrumb-item>
       </el-breadcrumb>

       <el-card>
           <el-alert
                   :closable="false"
                   title="注意：只允许第三级分类设置相关参数"
                   type="warning"
                   show-icon>
           </el-alert>
           <el-row class="row_pad">
               <span>选择商品分类：</span>
               <el-cascader
                       v-model="value"
                       :options="catelist"
                       :props="cateProps"
                       @change="handleChange"></el-cascader>
           </el-row>
           <el-tabs v-model="activeName" @tab-click="handleClick">
               <el-tab-pane label="动态参数" name="many" >
                   <el-button type="primary" plain size="mini" :disabled="isBtnDisabled" @click="dialogVisible = true">添加参数</el-button>
                   <el-table border
                           :data="manyTableData"
                   width="100%">
                       <el-table-column type="expand">
                           <template slot-scope="scope">
                               <el-tag closable v-for="(item, index) in scope.row.attr_vals" :key="index">
                                   {{item}}
                               </el-tag>


<!--                               到这里-->
                               <el-input
                                       class="input-new-tag"
                                       v-if="inputVisible"
                                       v-model="inputValue"
                                       ref="saveTagInput"
                                       size="small"
                                       @keyup.enter.native="handleInputConfirm"
                                       @blur="handleInputConfirm">
                               </el-input>
                               <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>


                           </template>
                       </el-table-column>
                       <el-table-column type="index"></el-table-column>
                       <el-table-column
                               prop="attr_name"
                               label="参数名称">
                       </el-table-column>
                       <el-table-column label="操作">
                           <template slot-scope="scope">
                               <el-button size="mini" type="primary" icon="el-icon-edit" @click="xianshi(scope.row.attr_id)">编辑</el-button>
                               <el-button size="mini" type="danger" icon="el-icon-delete" @click="shanchu(scope.row.attr_id)">删除</el-button>
                           </template>
                       </el-table-column>
                   </el-table>
               </el-tab-pane>
               <el-tab-pane label="静态属性" name="only">
                   <el-button type="primary" plain size="mini" :disabled="isBtnDisabled" @click="dialogVisible = true">添加属性</el-button>
                   <el-table border
                             :data="onlyTableDate"
                             width="100%">
                       <el-table-column type="expand"></el-table-column>
                       <el-table-column type="index"></el-table-column>
                       <el-table-column
                               prop="attr_name"
                               label="属性名称">
                       </el-table-column>
                       <el-table-column label="操作">
                           <template slot-scope="scope">
                               <el-button size="mini" type="primary" icon="el-icon-edit" @click="xianshi">编辑</el-button>
                               <el-button size="mini" type="danger" icon="el-icon-delete" @click="shanchu(scope.row.attr_id)">删除</el-button>
                           </template>
                       </el-table-column>
                   </el-table>
               </el-tab-pane>
           </el-tabs>
       </el-card>

<!--       增添对话框-->
       <el-dialog
               @close="EmptyParams"
               :title="'添加' + textlist"
               :visible.sync="dialogVisible"
               width="30%">

           <el-form :model="ruleForm" :rules="rules" ref="ParamsruleFormRef" label-width="100px">
               <el-form-item :label="textlist" prop="attr_name">
                   <el-input v-model="ruleForm.attr_name"></el-input>
               </el-form-item>
           </el-form>

           <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addesParams">确 定</el-button>
            </span>
       </el-dialog>
<!--修改对话框-->
       <el-dialog
               @close="ReviseEmptyParams"
               :title="'修改' + textlist"
               :visible.sync="reviselogVisible"
               width="30%">

           <el-form :model="reviseruleForm" :rules="reviserules" ref="reviseParamsruleFormRef" label-width="100px">
               <el-form-item :label="textlist" prop="attr_name">
                   <el-input v-model="reviseruleForm.attr_name"></el-input>
               </el-form-item>
           </el-form>

           <span slot="footer" class="dialog-footer">
                <el-button @click="reviselogVisible = false">取 消</el-button>
                <el-button type="primary" @click="reviseParam">确 定</el-button>
            </span>
       </el-dialog>
   </div>
</template>

<script>
    export default {
        name: "Params",
        computed:{
            textlist(){
                if(this.activeName === 'many'){
                    return '动态参数'
                }return  '静态属性'
            },
            isBtnDisabled(){
                if(this.value.length !== 3) {
                    return true
                }else {
                    return false
                }
            },
            cateId(){
                if(this.value.length === 3){
                    console.log(this.value[2])
                    return this.value[2]
                } return null
            }
        },
        data(){
            return{
                reviseruleForm:{
                },
                reviselogVisible:false,
                dialogVisible:false,
                manyTableData:[],
                ruleForm:{
                    attr_name:'',
                },
                onlyTableDate:[],
                value:[],
                catelist:[],
                activeName:'many',
                cateProps:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children',
                    expandTrigger: 'hover'
                },
                rules: {
                    attr_name: [
                        { required: true, message: '请输入', trigger: 'blur' },
                        { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
                    ],
                },
                reviserules: {
                    attr_name: [
                        { required: true, message: '请输入', trigger: 'blur' },
                        { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        created() {
            this.getCateList()
        },
        methods:{
            async shanchu(id){

                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const {data:res} = await this.$http.delete(`categories/${this.cateId}/attributes/${id}`)
                    if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getParamsData()
                }).catch(() => {
                });
            },
            async xianshi(id){
                const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes/${id}`,{params:{attr_sel:this.activeName}})
                console.log(res)
                this.reviseruleForm = res.data
                this.reviselogVisible=true
            },
            async reviseParam(){
                const {data:res} =  await this.$http.put(`categories/${this.cateId}/attributes/${this.reviseruleForm.attr_id}`,{attr_name:this.reviseruleForm.attr_name,attr_sel:this.activeName})
                console.log(res)
                this.getParamsData()
                this.reviselogVisible = false

            },
            ReviseEmptyParams(){
                this.$refs.reviseParamsruleFormRef.resetFields()
            },
            EmptyParams(){
                this.$refs.ParamsruleFormRef.resetFields()
            },
            async getCateList(){
                const {data:res} = await this.$http.get('categories')
                this.catelist = res.data
                console.log(this.catelist)
            },
            handleChange(){
                this.getParamsData()

            },
            async  getParamsData(){
                console.log(this.value)
                if(this.value.length !== 3) return this.value = []
                const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes`, {params: {sel: this.activeName}})
                console.log(res)
                res.data.forEach(item => {
                    item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []
                })

                if(this.activeName === 'many'){
                    this.manyTableData = res.data
                }else {
                    this.onlyTableDate = res.data
                }
            },
            handleClick() {
                this.getParamsData()
                console.log(this.activeName);
            },
            addesParams(){
                this.$refs.ParamsruleFormRef.validate(async  valid => {
                    if(!valid) return

                    const {data:res} = await this.$http.post(`categories/${this.cateId}/attributes`,{attr_name:this.ruleForm.attr_name,attr_sel:this.activeName})
                    console.log(res)
                    if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
                    this.dialogVisible = false
                    this.getParamsData()

                })

            },

        }
    }
</script>

<style scoped>
    .row_pad{
        margin: 10px 0;
    }
</style>